<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title>Elastic Community Link Collector</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
  <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>

<body>

<div class="container mt-2 pt-2">
  <header class="navbar">
    <section class="navbar-section">
      <a href="https://github.com/spinscale/link-rating" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
      <a href="/"><img src="/img/main.png" alt="Link rating logo" style="height: 36px; margin-left: 4em;"></a>
    </section>
    <section class="navbar-section" th:if="${user}">
      <a style="cursor: pointer" onclick="document.getElementById('modal').classList.add('active')">Submit Link</a>
    </section>
    <section class="navbar-section">
      <a th:unless="${user}" href="/oauth2/authorization/github" class="btn btn-link">Login</a>
      <form method="post" action="/logout" th:if="${user}">
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
        <input type="submit" class="btn btn-link"  value="Logout"/>
      </form>
      <figure class="avatar tooltip tooltip-left" th:data-tooltip="${'Logged in as ' + user.getAttribute('login')}" th:if="${user != null && user.getAttribute('avatar_url') != null}"><img th:src="${user.getAttribute('avatar_url')}"></figure>
    </section>
  </header>
</div>

<div class="container text-center mt-2 pt-2">
  <div class="columns">
    <div class="column col-3"></div>
    <div class="column col-6">
      <form action="/" method="get" >
      <div class="input-group input-inline">
        <input class="form-input input-xs" type="text" name="q" placeholder="search" style="width: 20em;">
        <button class="btn btn-primary input-group-btn">Search</button>
      </div>
      </form>
    </div>
  </div>
</div>
<div class="divider" style="margin-top: 1em; padding-bottom: 1em"></div>


<div class="container grid-md mt-2 pt-2">

  <h1 th:if="${#lists.isEmpty(links)}">No results found for <code class="text-error" th:text="*{q}"></code></h1>

  <div th:each="link : ${links}">
  <div class="columns">
    <div class="column col-1">
      <img th:src="@{${'/img/' + link.category + '.png'}}" style="height: 4em" class="p-centered">
    </div>
    <div class="column col-1" th:if="${user}">
      <form method="post" th:action="${'/link/' + link.id + '/vote'}" th:if="${user}">
        <button type="submit" class="btn btn-sm s-circle tooltip tooltip-top p-centered" data-tooltip="Vote up!"><i class="icon icon-arrow-up"></i></button>
      </form>
      <form method="post" th:action="${'/link/' + link.id + '/delete'}" th:if="${is_admin && link.approved}">
        <button type="submit" class="btn btn-action btn-sm submit s-circle tooltip tooltip-top p-centered mt-2" data-tooltip="Delete Link!"><i class="icon icon-delete error text-error mx-1"></i></button>
      </form>
      <form method="post" th:action="${'/link/' + link.id + '/approve'}" th:if="${is_admin && !link.approved}">
        <button type="submit" class="btn btn-action btn-sm submit s-circle tooltip tooltip-top p-centered mt-2" data-tooltip="Approve Link!"><i class="icon icon-check error text-success mx-1"></i></button>
      </form>
    </div>
    <div class="column col-10 float-left">
      <div class="columns">
        <div class="column col-12"><a th:href="*{link.url}" th:text="*{link.title}"></a></div>
      </div>
      <div class="columns">
        <div class="column col-2"><span th:text="*{link.votes + ' votes'}"></span></div>
        <div class="column col-9 text-gray" th:text="*{link.ago}"></div>
        <div class="column col-1">
          <a th:href="*{'/link/' + link.id}" class="tooltip tooltip-top" data-tooltip="Shareable Link!"><i class="icon icon-link mx-1"></i></a>
        </div>
      </div>
      <!--
      <div class="columns">
        <div class="col-12">
          <span class="chip bg-secondary">Indexing</span>
          <span class="chip bg-secondary">Administration</span>
        </div>
      </div>
      -->
      <div class="columns">
        <div class="column col-12"><small class="tile-subtitle text-gray" th:text="*{link.description}"></small></div>
      </div>
    </div>
  </div>
  <div class="divider" style="padding-bottom: 0.5em"></div>
  </div>
</div>

<div class="modal" id="modal" th:if="${user}">
  <a class="modal-overlay" aria-label="Close" ></a>
  <div class="modal-container">
    <div class="modal-header">
      <a href="#close" class="btn btn-clear float-right" aria-label="Close" onclick="document.getElementById('modal').classList.remove('active')"></a>
      <div class="modal-title h5">Submit new link</div>
    </div>
    <div class="modal-body">
      <div class="content">
        <form method="post" action="/link">
          <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
          <div class="form-group">
            <div class="form-group"><label class="form-label">URL</label><input class="form-input" type="url" placeholder="Name" name="url" /></div>
            <div class="form-group"><label class="form-label">Title</label><input class="form-input" type="text" placeholder="Name" name="title" /></div>
            <div class="form-group">
              <label class="form-label">Category</label>
              <select class="form-select" name="category">
                <option>Elasticsearch</option>
                <option>Kibana</option>
                <option>Beats</option>
                <option>Logstash</option>
                <option>Cloud</option>
              </select>
            </div>
            <div class="form-group"><label class="form-label">Description</label><textarea class="form-input" type="text" placeholder="Name" name="description" rows="3"></textarea></div>
          </div>
          <input type="submit" class="btn btn-primary" value="Send!"/>
        </form>
      </div>
    </div>
  </div>
</div>

</body>

</html>
